<template>
	<view :class="[config.style]">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<!-- #ifdef H5-->
		<Top :config="config"></Top>
		<!-- #endif -->
		<view class="main-section top card-section">
			<view class="card-item">
				<view class="bg" :style="{'background-color':(data.config!==undefined?data.config.bg.color:'$Bule')}">
					<image :src="data.card_bg" if="data.card_bg"/>
				</view>
				<view class="card-data">
					<view class="header">
						<view class="logo">
							<image :src="data.cover_100" class="logo" mode="widthFix" />
						</view>
						<view class="title" :style="{'color':(data.config!==undefined?data.config.title.color:'#fff')}">
							{{config.title}}
						</view>
					</view>
					<view class="card-title" :style="{'color':(data.config!==undefined?data.config.title.color:'#fff')}">
						{{data.title}}
					</view>
					<view class="card-description" :style="{'color':(data.config!==undefined?data.config.description.color:'#fff')}">
						{{data.description}}
					</view>
					<view class="card-status">
						<view class="status" v-if="data.have_card!==undefined && data.have_card.mt_id == data.id">
							已开通
						</view>
						<view class="status" v-else>
							未开通
						</view>
						
						<view class="time" v-if="data.have_card!==undefined && data.have_card.mt_id == data.id">
							<text>有效期至：</text>
							<text>{{data.have_card.end_time_str}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="sale-price" v-if="showSale">
				<view class="item" :class="chooseCycle == 'month'?'active':''" :style="[chooseCycle == 'month'?{'background-color':(data.config!==undefined?data.config.bg.color:'#000'),'color':(data.config!==undefined?data.config.title.color:'#fff')}:'']" v-if="data.month_price > 0" @click="chooseCycleFn('month')">
					<view class="price">
						
						<text>￥</text> <text>{{data.month_price}}</text><text>元/月</text>
					</view>
					<view class="choose">
						<text class="iconfont">&#xe7a3;</text>
					</view>
				</view>
				<view class="item" :class="chooseCycle == 'quarter'?'active':''" :style="[chooseCycle == 'quarter'?{'background-color':(data.config!==undefined?data.config.bg.color:'#000'),'color':(data.config!==undefined?data.config.title.color:'#fff')}:'']" v-if="data.quarter_price > 0" @click="chooseCycleFn('quarter')">
					<view class="price">
						<text>￥</text> <text>{{data.quarter_price}}</text><text>元/季</text>
					</view>
					<view class="choose">
						<text class="iconfont">&#xe7a3;</text>
					</view>
				</view>
				<view class="item" :class="chooseCycle == 'year'?'active':''" :style="[chooseCycle == 'year'?{'background-color':(data.config!==undefined?data.config.bg.color:'#000'),'color':(data.config!==undefined?data.config.title.color:'#fff')}:'']" v-if="data.year_price > 0" @click="chooseCycleFn('year')">
					<view class="price">
						<text>￥</text> <text>{{data.year_price}}</text><text>元/年</text>
					</view>
					<view class="choose">
						<text class="iconfont">&#xe7a3;</text>
					</view>
				</view>
				<view class="item" :class="chooseCycle == 'year_two'?'active':''" :style="[chooseCycle == 'year_two'?{'background-color':(data.config!==undefined?data.config.bg.color:'#000'),'color':(data.config!==undefined?data.config.title.color:'#fff')}:'']" v-if="data.year_two_price > 0" @click="chooseCycleFn('year_two')">
					<view class="price">
						<text>￥</text> <text>{{data.year_two_price}}</text><text>元/两年</text>
					</view>
					<view class="choose">
						<text class="iconfont">&#xe7a3;</text>
					</view>
				</view>
				<view class="item" :class="chooseCycle == 'year_three'?'active':''" :style="[chooseCycle == 'year_three'?{'background-color':(data.config!==undefined?data.config.bg.color:'#000'),'color':(data.config!==undefined?data.config.title.color:'#fff')}:'']" v-if="data.year_three_price > 0" @click="chooseCycleFn('year_three')">
					<view class="price">
						<text>￥</text> <text>{{data.year_three_price}}</text><text>元/三年</text>
					</view>
					<view class="choose">
						<text class="iconfont">&#xe7a3;</text>
					</view>
				</view>
				<view class="item" :class="chooseCycle == 'year_five'?'active':''" :style="[chooseCycle == 'year_five'?{'background-color':(data.config!==undefined?data.config.bg.color:'#000'),'color':(data.config!==undefined?data.config.title.color:'#fff')}:'']" v-if="data.year_five_price > 0" @click="chooseCycleFn('year_five')">
					<view class="price">
						<text>￥</text> <text>{{data.year_five_price}}</text><text>元/五年</text>
					</view>
					<view class="choose">
						<text class="iconfont">&#xe7a3;</text>
					</view>
				</view>
				<view class="item" :class="chooseCycle == 'forever'?'active':''" :style="[chooseCycle == 'forever'?{'background-color':(data.config!==undefined?data.config.bg.color:'#000'),'color':(data.config!==undefined?data.config.title.color:'#fff')}:'']" v-if="data.forever_price > 0" @click="chooseCycleFn('forever')">
					<view class="price">
						<text>￥</text> <text>{{data.forever_price}}</text><text>元/永久</text>
					</view>
					<view class="choose">
						<text class="iconfont">&#xe7a3;</text>
					</view>
				</view>
			</view>
			
			<view class="sale-price ios-sale-price" v-else>
				<view class="desc">IOS功能暂不可用</view>
			</view>
			
			<view class="content">
				<rich-text :nodes="util.formatRichText(data.content)"></rich-text>
			</view>
		</view>
		<!--购买兑换按钮盒子-->
		<view class="sale-bar">
			<view class="card" :class="data.card_data?'':'hidden'">
				<button type="default" size="default" @click="confirmCard">激活码兑换</button>
			</view>
			<view class="sale">
				<!-- #ifdef MP -->
				<!--判断是否绑定手机号-->
				<template v-if="config.mobile_bind==2 && userInfo.memberInfo.mobile == ''">
					<button v-if="showSale" type="default" size="default" :style="{'background-color':(data.config!==undefined?data.config.bg.color:'#000'),'color':(data.config!==undefined?data.config.title.color:'#fff')}" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
						<text v-if="data.have_card!==undefined && data.have_card.mt_id == data.id">续费会员</text>
						<text v-else>立即开通</text>
					</button>
					<button v-else type="default" size="default" :style="{'background-color':(data.config!==undefined?data.config.bg.color:'#000'),'color':(data.config!==undefined?data.config.title.color:'#fff')}" disabled="true">
						<text>IOS功能暂不可用</text>
					</button>
				</template>
				<template v-else>
					<button v-if="showSale" type="default" size="default" :style="{'background-color':(data.config!==undefined?data.config.bg.color:'#000'),'color':(data.config!==undefined?data.config.title.color:'#fff')}" class="member-sale" @click="memberSale">
						<text v-if="data.have_card!==undefined && data.have_card.mt_id == data.id">续费会员</text>
						<text v-else>立即开通</text>
					</button>
					<button v-else type="default" size="default" :style="{'background-color':(data.config!==undefined?data.config.bg.color:'#000'),'color':(data.config!==undefined?data.config.title.color:'#fff')}" disabled="true" class="member-sale">
						<text>IOS功能暂不可用</text>
					</button>
				</template>
				<!-- #endif -->
				
				<!-- #ifdef H5 -->
				<!--h5判断是否绑定手机号-->
				<button type="default" size="default" :style="{'background-color':(data.config!==undefined?data.config.bg.color:'#000'),'color':(data.config!==undefined?data.config.title.color:'#fff')}" class="member-sale" @click="memberSale">
					<text v-if="data.have_card!==undefined && data.have_card.mt_id == data.id">续费会员</text>
					<text v-else>立即开通</text>
				</button>
				<!-- #endif -->
			</view>
		</view>
		
		<!-- 卡密兑换提交信息 -->
		<uni-popup id="dialogInput" ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" title="激活码" value="" placeholder="请输入激活码" @confirm="cardMemberActive"></uni-popup-dialog>
		</uni-popup>
		
		<!--登录框-->
		<Login ref="login" :config="config" />
		<!--绑定手机号-->
		<BindMobile ref="bindMobile" :config="config" @getUserInfo="getUserInfo"/>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import Top from '../common/top.vue'
	import CopyRight from '@/common/components/copyright.vue' //自定义版权
	import BindMobile from '@/common/components/bindMobile.vue'
	
	export default {
		components: {
			CopyRight,
			Top,
			BindMobile
		},
		data() {
			return {
				loading: true, //加载中
				urlParams: {},
				data: {},
				userInfo: {},
				chooseCycle: 'month', //选择的开通或升级周期
				showSale: true, //IOS端是否显示购买按钮
			}
		},
		async onLoad(option) {
			await this.$onLaunched;
			//获取url参数
			this.urlParams = option
			
			this.getData().then(res => {
				//ISO限制处理
				this.iosShowSale()
				
				// H5端分享设置
				//#ifdef H5
				let url = window.location.href
				
				let shareData = {
					title : this.data.title,
					desc : this.data.description,
					img: this.data.cover_200
				}
				//console.log(url)
				this.wechat.share(shareData,url)
				//#endif
			})
		},
		created() {
			//获取已登录用户数据
			this.getUserInfo()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			/**
			 * IOS端支付限制判断
			 */
			iosShowSale: function(){
				this.showSale = this.util.setShowSale()
			},
			
			/**
			 * 获取详情数据
			 */
			getData: function(){
				let that = this
				let params = this.urlParams
				let data = {}
					data.action = 'detail'
					data.id = params.id
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/member'
					//#endif
					//#ifdef H5
					url = 'entry/site/member'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.data = res.data.data
								that.setDefaultChooseCycle()
								that.loading = false
							}
							console.log(res.data)
							resolve(res.data)
						},
					})
				})
			},
			/**
			 * 会员服务期限&价格选择
			 * @param String value
			 */
			chooseCycleFn: function(value){
				this.chooseCycle = value
			},
			
			/**
			 * 设置默认选择开通周期
			 */
			setDefaultChooseCycle: function(){
				if(this.data.forever_price > 0){
					this.chooseCycle = 'forever'
				}
				if(this.data.year_price > 0){
					this.chooseCycle = 'year'
				}
				if(this.data.quarter_price > 0){
					this.chooseCycle = 'quarter'
				}
				if(this.data.month_price > 0){
					this.chooseCycle = 'month'
				}
			},
			/**
			 * 会员购买
			 */
			memberSale: function(){
				console.log('购买会员服务')
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {};
				// 判断是否需要绑定手机号
				if(this.config.mobile_bind==2 && this.userInfo.memberInfo && this.userInfo.memberInfo.mobile==''){
					that.bindMobile()
					return false
				}
				
				let data = {
					'order_info_id' : this.data.id,
					'order_info_type' : 'Member',
					'type' : this.chooseCycle,
					'm' : 'muu_classroom',
					'action': 'create',
				}
				
				//下单
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/orders'
					//#endif
					//#ifdef H5
					url = 'entry/site/orders'
					//#endif
				this.util.request({
					url : url,
					data: data,
					method: 'POST',
					
					success: function (res) {
						//console.log(res.data);
						if (res.data.code == 200) {
							if(res.data.data.paid == 0){
								that.pay('muu_classroom',res.data.data.order_no)
							}else{
								uni.showModal({
									title: '温馨提示',
									content: '购买成功',
									showCancel: false,
									success: function(){
										//购买成功后，执行获取数据方法（更新数据）
										that.getData()
									}
								});
							}
						}else if(res.data.code == 0 && res.data.data == 'login') {
							//触发登录框
							that.$refs.login.loginDialog()
						
						}else{
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					}
				})
			},
			
			/**
			 * 打开输入popup激活码兑换
			 */
			confirmCard: function(){
				let that = this
				this.$refs.dialogInput.open()
			},
			/**
			 * 激活码激活确认
			 */
			cardMemberActive: function(callback,val){
				let that = this
				let value = val
				console.log(value)
				let data = {}
					data.id = that.data.id
					data.cdkey = value
					
				// 激活提交
				let url = '';
					//#ifdef MP-WEIXIN
					data.action = 'mcard_activate'
					data.m = 'muu_classroom'
					url = 'entry/wxapp/card'
					//#endif
					//#ifdef H5
					data.action = 'activate'
					data.m = 'muu_classroom_plugin_card'
					url = 'entry/site/mcdkey'
					//#endif
				this.util.request({
					url : url,
					data: data,
					method: 'POST',
					success : function(res) {
						//console.log(res)
						if(res.data.code == 200){
							// 激活成功，更新数据
							uni.showToast({
							    title: res.data.msg,
								icon: 'none',
								position: 'bottom',
							    duration: 2000
							});
							that.getData()
							that.$refs.dialogInput.close()
						}else if(res.data.code == 0 && res.data.data == 'login') {
							//触发登录框
							that.$refs.login.loginDialog()
						}else{
							uni.showToast({
							    title: res.data.msg,
								icon: 'none',
								position: 'bottom',
							    duration: 2000
							});
						}
						
					},
					fail : function(res){
						uni.showModal({
						    title: '提示',
						    content: '发生错误，请稍后再试~',
						    success: function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					},
				})
			},
			
			/**
			 * 订单支付
			 */
			pay: function(module,order_no){
				let that = this
				// 支付
				let data = {}
					data.module = module
					data.order_no = order_no
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/pay'
					//#endif
					//#ifdef H5
					url = 'entry/site/pay'
					data.action = 'jssdk'
					//#endif
				this.util.request({
					url : url,
					data : data,
					
					success(res) {
						if (res.data && res.data.data && res.data.code == 200) {
							//console.log(res);
							// #ifdef H5
							//JSSDK
							that.wechat.pay({
								'timeStamp': res.data.data.timeStamp,
								'nonceStr': res.data.data.nonceStr,
								'package': res.data.data.package,
								'signType': res.data.data.signType,
								'paySign': res.data.data.paySign,
								'success': function (res) {
									//执行支付成功提示
									uni.showModal({
									    title: '提示',
									    content: '支付成功',
										confirmText: '查看订单',
										cancleText: '返回页面',
									    success: function (res) {
									        if (res.confirm) {
									            console.log('用户点击确定');
												let order_url = '../my/orders/index'
												uni.redirectTo({
													url: order_url
												});
									        } else if (res.cancel) {
									            console.log('用户点击取消');
												uni.navigateBack()
									        }
									    }
									});
								},
								'fail': function (res) {
									uni.navigateBack()
								}
							},window.location.href);
							// #endif
							
							// #ifdef MP-WEIXIN
							
							//发起支付
							uni.requestPayment({
								'provider': 'wxpay',
								'timeStamp': res.data.data.timeStamp,
								'nonceStr': res.data.data.nonceStr,
								'package': res.data.data.package,
								'signType': res.data.data.signType,
								'paySign': res.data.data.paySign,
								'success': function (res) {
									//执行支付成功提示
									// 更新数据
									that.getData()
								},
								'fail': function (res) {
									
								}
							})
							// #endif
							
						 }else{
							uni.showModal({
								title: '系统提示',
								content: res.data.msg ? res.data.msg : '错误',
								showCancel: false,
								success: function (res) {
									if (res.confirm) {
										uni.navigateBack()
									}
								}
							})
						}
					},
					fail(res) {
						uni.showModal({
							title: '系统提示',
							content: res.data.msg ? res.data.msg : '错误',
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									
								}
							}
						})
					}
				});
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				console.log('userInfo',userInfo)
				if(Object.keys(userInfo).length > 0){
					this.userInfo = userInfo
				}else{
					this.util.getUserInfo((res)=>{
						that.userInfo = res
					})
				}
			},
			
			/**
			 * 获取用户详情数据
			 */
			getApiUserInfo: function(){
				let that = this
				let data = {}
					data.action = 'user_info'
					data.m = 'muu_classroom'
				//动态获取用户数据
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/ucenter'
					//#endif
					//#ifdef H5
					url = 'entry/site/ucenter'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.userInfo.sessionid = that.userInfo.sessionid
							that.userInfo.memberInfo = res.data.data
							uni.setStorageSync('userInfo', that.userInfo)
							//console.log(that.userInfo)
						}
						//结束下拉刷新
						uni.stopPullDownRefresh();
					}
				})
			},
			
			/**
			 * 非小程序端绑定手机号
			 */
			bindMobile: function(){
				this.$refs.bindMobile.bindMobileOpen()
			},
			
			/**
			 * 解密小程序端手机号码
			 * @param {Object} e
			 */
			decryptPhoneNumber: function(e) {
				let that = this
				console.log(e);    
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {    
					console.log('用户拒绝提供手机号');  
				}else{
					console.log('用户同意提供手机号');
					// 小程序端重新获取session_key
					uni.login({
						success: function (res) {
							console.log(res)
							let code = res.code
							that.util.request({
								url: 'entry/wxapp/session',
								data: {
									'action': 'openid',
									'code': code ? code : '',
								},
								success: function (res) {
									console.log(res);
									if (res.data.code == 200) {
										if(res.data.data.openid){
											uni.setStorageSync('openid', res.data.data.openid)
										}
										// 请求绑定手机号
										let encryptedData = e.detail.encryptedData;
										let iv = e.detail.iv;
										let data = {}
											data.action = 'decrypt_mobile'
											data.m = 'muu_classroom'
											data.iv = iv
											data.encryptedData = encryptedData
										//动态获取用户数据
										let url = ''
											//#ifdef MP-WEIXIN
											url = 'entry/wxapp/ucenter'
											//#endif
											//#ifdef H5
											url = 'entry/site/ucenter'
											//#endif
										that.util.request({
											url : url,
											data : data,
											success: function (res) {
												if (res.data.code == 200) {
													console.log(res.data)
													that.getApiUserInfo()
												}
												uni.showToast({
												    title: res.data.msg,
												    duration: 2000,
													icon: 'none'
												});
											}
										})
									}else{
										uni.showToast({
										    title: res.data.msg,
										    duration: 2000,
											icon: 'none'
										});
									}
								}
							});
						},
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.card-section {
		padding-bottom: 220rpx;
		.card-item {
			position: relative;
			padding: 20rpx;
			width: 710rpx;
			height: 448rpx;
			margin: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			box-sizing: border-box;
			.bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
				image {
					width: 100%;
				}
			}
			.card-data {
				position: relative;
				z-index: 2;
				.header {
					position: relative;
					display: flex;
					z-index: 3;
					.logo {
						margin-bottom: 20rpx;
						image {
							width: 72rpx;
							height: 72rpx;
							border-radius: 10rpx;
						}
					}
					.title {
						padding-left: 20rpx;
						font-size: 28rpx;
						line-height: 72rpx;
					}
				}
				.card-title {
					margin-bottom: 20rpx;
					font-size: 44rpx;
					font-weight: 600;
					z-index: 2;
				}
				.card-description {
					margin-bottom: 20rpx;
					font-size: 28rpx;
					z-index: 3;
				}
				.card-status {
					display: flex;
					color: #fff;
					font-size: 28rpx;
					.status {
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						border: 2rpx solid #fff;
					}
					.time {
						padding-left: 10rpx;
						line-height: 60rpx;
					}
				}
			}
		}
		
		/*价格区域*/
		.sale-price {
			font-size: 28rpx;
			padding: 0 20rpx;
			.item {
				display: flex;
				background-color: #f8f8f8;
				color: #666;
				margin: 10rpx auto;
				padding: 10rpx;
				border-radius: 18rpx;
				.price {
					flex: 1;
				}
				.choose {
					display: none;
					width: 60rpx;
				}
			}
			.item.active {
				background-color: $Blue;
				.price {
					
				}
				.choose {
					
					display: block;
				}
			}
		}
		
		.ios-sale-price {
			font-size: 28rpx;
			padding: 0 20rpx;
			.desc {
				background-color: #f8f8f8;
				color: #666;
				margin: 10rpx auto;
				padding: 10rpx;
				border-radius: 18rpx;
			}
		}
		
		/*详情描述部分*/
		.content {
			position: relative;
			padding: 20rpx 20rpx 60rpx 20rpx;
			z-index: 1;
			img {
				display: block;
			}
		}
	}
	.sale-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		z-index: 98;
		.card {
			margin-bottom: 16rpx;
			button {
				background-color: #fff;
				border-radius: 90rpx;
				border: 2rpx solid #eee;
				&::after{
					border: 0;
				}
			}
		}
		.sale {
			button {
				color: #fff;
				border-radius: 90rpx;
			}
			.disabled {
				
			}
		}
		
		.member-sale {
			position: relative;
		}
	}
	
	
	.Blue {
		.sale {
			button {
				background-color: $Blue;
			}
		}
	}
	.Green {
		.sale {
			button {
				background-color: $Green;
			}
		}
	}
	.LightRed {
		.sale {
			button {
				background-color: $LightRed;
			}
		}
	}
	.Orange {
		.sale {
			button {
				background-color: $Orange;
			}
		}
	}
	.LightPink {
		.sale {
			button {
				background-color: $LightPink;
			}
		}
	}
	.Magenta {
		.sale {
			button {
				background-color: $Magenta;
			}
		}
	}
</style>
